<template>
    <div :class="`tech-goods-after-sale-item ${mode}`">
        <div class="item-header">
            <div class="base-info">
                <div class="store-name title-color">
                    {{ typeValue }}
                </div>
                <div class="date-value">{{itemInfo.apply_time}}</div>
            </div>
            <div :class="`status-info ${isEndStatus ? 'is-end' : ''}`">{{statusInfo.text}}</div>
        </div>
        <div class="item-content">
            <template v-if="itemInfo.details.length === 1">
                <OrderGoodsItem :itemInfo="itemInfo.details[0]" :isOnlyShow="true" :mode="mode" :styleMode="styleMode" :theme="theme" />
            </template>
            <template v-else>
                <div class="list">
                    <img v-for="(item, index) in itemInfo.details" :key="index" class="list-img" :src="imageSrc(item.pic)" alt="">
                </div>
            </template>
            <div class="total-price-amount title-color">
                退款金额<span class="price"><span class="label">￥</span>{{itemInfo.trans.toFixed(2)}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import OrderGoodsItem from '../order/OrderGoodsItem';

import { DELIVERY_TYPE_TEXT } from '@constants/shop';
import { SHOP_ORDER_STATUS } from '@constants/shopOrderStatus';
import { createShopImageSrc } from '@common/utils';
import { getShopAfterSaleOrderTipInfo } from '@biztools/shopOrder';

import ModeMixin from '@common/mixin';
export default {
    name: 'GoodsAfterSaleItem', // 商品售后单项
    mixins: [ModeMixin],
    components: {
        OrderGoodsItem,
    },
    props: {
        itemInfo: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    computed: {
        typeValue() {
            const { itemInfo } = this.$props;
            return itemInfo.type === 1 ? '仅退款' : '退货退款';
        },
        isEndStatus() {
            const { itemInfo } = this.$props;
            if (itemInfo.status === SHOP_ORDER_STATUS.ORDER_COMPLETE || itemInfo.status === SHOP_ORDER_STATUS.ORDER_CLOSE) {
                return true;
            }
            return false;
        },
        statusInfo() {
            return getShopAfterSaleOrderTipInfo(this.$props.itemInfo);
        },
        imageSrc() {
            return name => createShopImageSrc(name);
        },
    },
};
</script>

<style lang="less">
.tech-goods-after-sale-item {
    .p(@gap-md);
    .mode-white();
    .m-b(@gap-md);
    .item-header {
        .flex-row-between();
        .base-info {
            .store-name {
                font-size: @shop-font-size-md;
                font-weight: 500;
                .flex();
                align-items: center;
                .mode-tag {
                    height: 16px;
                    line-height: 16px;
                    color: @tip-color;
                    background-color: rgba(125,125,131,0.08);
                    .p-h(3px);
                    .m-r(3);
                    font-size: @font-size-mini;
                }
            }
            .date-value {
                color: @tip-color;
                font-size: @font-size-sm;
                .p-v(@shop-gap);
                opacity: .7;
            }
        }
        .status-info {
            font-size: @font-size-sm;
            color: @red;
            &.is-end {
                color: @tip-color;
            }
        }
    }
    .item-content {
        .list {
            overflow: hidden;
            overflow-x: auto;
            .flex();
            .list-img {
                width: 70px;
                height: 70px;
                border-radius: @border-radius;
                border: @border;
                .m-r(@shop-gap);
            }
        }
        .total-price-amount {
            .flex();
            align-items: center;
            justify-content: flex-end;
            font-size: @shop-font-size;
            color: @text-color;
            .p-v(@shop-gap-md);
            .price {
                font-size: @shop-font-size-mmd;
                font-family: @font-family-number;
                font-weight: 500;
                .label {
                    .m-r(-3);
                }
            }
        }
    }
}
</style>
